
<template>
  <div class="supply-info-container">
    <div class="supply-nature">
      <span>客户性质</span>
      <el-radio-group v-model="companyNature" @change="selectNature">
        <el-radio label="A">品牌方</el-radio>
        <el-radio label="B">供应商</el-radio>
        <el-radio label="C">品牌方/供应商</el-radio>
        <el-radio label="D">平台</el-radio>
        <el-radio label="E">客户</el-radio>
      </el-radio-group>
    </div>
    <div class="supply-info">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px; ">&#xe621;</i>
        <span>基本信息</span>
      </div>
      <div class="supply-info-fileds">
        <el-form :model="dynamicValidateForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="dynamicValidateForm.companyName" ></el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="4">-->
<!--              <el-form-item label="公司编码" prop="supplierCode">-->
<!--                <el-input v-model="dynamicValidateForm.supplierCode"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="公司地址">
                <v-distpicker  @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" ></v-distpicker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="详细地址" prop="companyAddress" class="address">
            <el-input v-model="dynamicValidateForm.companyAddress"   style="width:50%;"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="supply-List">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px; ">&#xe66f;</i>
        <span>联系信息</span>
      </div>
      <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation" @getTemplateRow="getTemplateRow"></v-table>
      <div class="btn">
        <el-button circle icon="el-icon-plus" size="mini" type="warning"  @click="addContact"></el-button><span style="color:#ff8c42;font-size: 14px;">添加联系信息</span>
      </div>
    </div>
    <div class="supply-Account">
      <div class="info">
        <i class="iconfont" style="color:#40FF70;margin-left: 10px; ">&#xe695;</i>
        <span>注册信息</span>
      </div>
      <el-form :model="supplyForm" :rules="rules" ref="supplyForm" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="开户行名称" prop="bankAccountName">
              <el-input v-model="supplyForm.bankAccountName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行账号" prop="bankAccountNumber">
              <el-input v-model="supplyForm.bankAccountNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纳税号" prop="registrationCode">
              <el-input v-model="supplyForm.registrationCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="新增联系信息" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="ruleForm.contactName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人职位" prop="contactPosition">
              <el-input v-model="ruleForm.contactPosition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="电话号码" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone"  placeholder="输入多个请用逗号隔开,例如：199214102356，1880000000"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="contactMobile">
          <el-input v-model="ruleForm.contactMobile"  placeholder="请输入"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信" prop="contactWeChat">
              <el-input v-model="ruleForm.contactWeChat"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ" prop="contactQq">
              <el-input v-model="ruleForm.contactQq"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传真号码" prop="faxNumber">
              <el-input v-model="ruleForm.faxNumber"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="ruleForm.contactEmail"  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  size="medium" @click="dialogFormVisible = false" >取 消</el-button>
        <el-button type="primary"  @click="submitForm('ruleForm')"size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <div class="supply-card">
      <div class="info">
        <i class="iconfont" style="color:#4FA1D9;margin-left: 10px; ">&#xe691;</i>
        <span>公司三证图片上传</span>
      </div>
      <div class="supply-upload">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
    </div>
    <div class="supply-btn">
      <el-button size="medium" type="primary"  @click="form('supplyForm')">提交</el-button>
      <el-button size="medium" @click="cancelSupplyAdd">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { regionData,CodeToText } from 'element-china-area-data'
  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import VTable from "components/common/PageTable/VTable"
  import VDistpicker from 'v-distpicker'
  import {localStorage} from 'js/localStorage'
  export default{
    components:{
      VTable,VForm,SplitVertical,VButton,VDistpicker
    },
    data(){
      return {
        //图片
        dialogImageUrl:[],
        dialogVisible: false,
        //省市区
        options: regionData,
        selectedOptions: [],
        companyNature:'',
        //弹窗
        dialogFormVisible:false,
        dynamicValidateForm:{
          companyName:'',
          companyAddress:''
        },
        supplyForm:{
          bankAccountName:'',
          bankAccountNumber :'',
          registrationCode:''
        },
        tableParams:{
          showDefault:true,
          dataArray:[],
          showMultiSelection:false,
          columnArray:[
            {label: '联系人', prop: 'contactName',  sortable: false},
            {label: '联系电话', prop: 'contactMobile',  sortable: false},
            {label: '公司电话', prop: 'contactPhone',  sortable: false},
            {label: '职位', prop: 'contactPosition',  sortable: false},
            {label: '微信', prop: 'contactWeChat',  sortable: false},
            {label: '邮箱', prop: 'contactEmail',  sortable: false},
          ],
          rowHandle:{
            view:{
              show:false
            },
            update:{
              show:false
            }
          }
        },

        ruleForm:{
          contactPhone :null,
          contactName :null,
          contactMobile:null,
          contactPosition:null,
          faxNumber:null,
          contactEmail:null,
          contactQq :null,
          contactWeChat:null,
          setDefault:false
        },
        rules:{
          companyAddress: [
            { required: true, message: '请输入地址', trigger: 'change' },
            { min: 4, max: 50, message: '长度4~50个字符', trigger: 'blur' }
          ],
          contactName: [
            { required: true, message: '请输入联系人姓名', trigger: 'change' },
            {min:2,max: 20, message: '请输入2~20位', trigger: 'blur'}
          ],
          contactMobile: [
            { required: true, message: '请输入联系人电话', trigger: 'change' },
            {min: 11,max:11, message: '请输入正确的手机号', trigger: 'blur'}
          ],
          contactPosition: [
            { required: true, message: '请输入联系人职位', trigger: 'change' },
            {min: 2, message: '至少输入2位', trigger: 'blur'}
          ],
          companyName:[
            { required: true, message: '请输入公司名称', trigger: 'blur' }
          ],
          bankAccountName:[
            { required: true, message: '请输入开户行名称', trigger: 'change' }
          ],
          bankAccountNumber :[
            { required: true, message: '请输入开户行账号', trigger: 'change' }
          ],
          registrationCode:[
            { required: true, message: '请输入纳税号', trigger: 'change' },
            { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
          ],

        },

        contactArr:[],
        supplierProvince:'',
        supplierCity:'',
        supplierDistrict:'',
        userId:'',
        row:'',
        nature:'',

      }
    },
    created(){
      this.userId=localStorage.get('userID')
    },
    methods:{
      handleOperation(rowIndex, row, methodName) {
        if(methodName  == "delete"){
          this.contactArr.splice(rowIndex,1)
        }
      },
      selectNature(val){
          this.nature=val
      },
      getTemplateRow(index,row){
        this.row=row
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submit()
          } else {
            return false;
          }
        });
      },
      form(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitSupply()
          } else {
            return false;
          }
        });
      },
      submit(){
        this.ruleForm['setDefault']=false
        this.contactArr.push(this.ruleForm)
        console.log(  this.contactArr)
        this.dialogFormVisible=false
        if(this.contactArr.length !== 0 ){

          this.ruleForm={}
        }
        this.tableParams.dataArray=this.contactArr
      },
      submitSupply(){
        for(let i in this.contactArr){
          if(this.row.contactName){
            if(this.contactArr[i].contactName === this.row.contactName){
              this.contactArr[i].setDefault=true
            }
          }else{
           this.contactArr[0].setDefault=true

          }
        }
        let para=this.dynamicValidateForm
        para['companyNature'] =this.nature
        para['companyProvince']=this.supplierProvince
        para['companyCity']=this.supplierCity
        para['companyDistrict']=this.supplierDistrict
        para['bankAccountName']=this.supplyForm.bankAccountName
        para['bankAccountNumber']=this.supplyForm.bankAccountNumber
        para['registrationCode']=this.supplyForm.registrationCode
        para['contactInfos'] =this.contactArr
        para['status']=0
        para['userId']=this.userId

        let succ=data=>{
          if(data.statusCode === "1"){
            this.$message.success('添加成功')
            this.$router.go(-1)
          }else{
            this.$message.error(data.statusMessage)
          }
        }
        this.api.supplierAdd(para,succ)
      },
      addContact(){
        this.dialogFormVisible=true
      },
      cancelSupplyAdd(){
        this.$router.go(-1)
      },
      onChangeProvince(province){
        this.supplierProvince=province.value
      },
      onChangeCity(city){
        this.supplierCity=city.value
      },
      onChangeArea(district){
        this.supplierDistrict=district.value
        this.dynamicValidateForm.companyAddress = this.supplierProvince+this.supplierCity+this.supplierDistrict
      },
      handlePictureCardPreview(){

      },
      handleRemove(){

      },
    }
  }
</script>
<style scoped>
  .supply-info-container .el-button--mini.is-circle{
    padding:1px;
  }
</style>
<style lang="scss" scoped>
  .supply-info-container{
    .supply-nature{
      background: #fff;
      margin: 3px 0;
      height:45px;
      line-height: 45px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      span{
        font-size: 16px;
        width: 90px;
        text-align: center;
        display: inline-block;
      }
    }
    .supply-info{
      background: #fff;
      height:160px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .info{
        line-height:45px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .supply-info-fileds{

      }

    }
    .supply-List{
      background: #fff;
      margin-top: 3px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .btn{
        padding:10px 5px;
      }
    }
    .supply-Account{
      background: #fff;
      margin-top: 3px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
    }
    .supply-card{
      background: #fff;
      margin-top: 3px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .supply-upload{
        padding: 10px;
      }
    }
    .supply-btn{
      width: 100%;
      text-align: center;
      padding-top: 20px;
    }
  }
</style>
